<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1>
            组件总结
        </h1>
        <p>     
        </p>

       <school></school>

       <hr>
       <hello></hello>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    // 创建组件1
    const school=Vue.extend({
        template:`
            <div>
                <h3>学校名称：{{schoolName}}</h3>
                <h3>地址：{{address}}</h3>
            </div>`
        
        ,
    
        data(){
            return {
                schoolName:'北京大学',
                address:"哈哈"
            }
        }
    });
    //创建组件2
    const student=Vue.extend({
        template:`
            <div>
                <hr/>
                <h1>{{name}}</h1>
                <h1>{{age}}</h1>
            </div>
        `,
        
        data() {
            return {
                name:'张三',
                age:18
            }
        },
    });
    //定义组件
    const hello=Vue.extend({
        template:`
            <div>
                <h1>{{msg}}</h1>
                //调用组件 子组件
                <student></student>
            </div>

        `,
        // 注册组件 子组件
        components:{
            student:student
        },
        data(){
            return {
                msg:'hello world'
            }
        }
    })

    //创建vm
    new Vue({
        el:'.app',
        //注册组件
        components:{
            school:school,
            hello:hello
        }
    });
</script>
</html>